<template>
    <div id="rich"></div>
  </template>
  
  <script setup>
  import { onMounted, onUnmounted } from "vue";
  import * as echarts from "echarts";
  let myRich = null;
  let myEchart = null;
  onMounted(() => {
    myRich = document.getElementById("rich");
    myEchart = echarts.init(myRich);
    let data = [20, 30, 40, 50];
    let option = {
      tooltip: {
        show: true,
        formatter: (value) => {
          return value.name + " " + data[value.dataIndex];
        },
      },
      xAxis: {
        type: "category",
        data: ["d1", "d2", "d3", "d4"],
      },
      yAxis: {
        min: 0,
        max: 100,
      },
      series: [
        {
          type: "pictorialBar",
          data: [1, 1, 1, 1],
          symbolSize: [40, 10],
          z: 999,
        },
        {
          type: "bar",
          data: [90, 90, 90, 90],
          barWidth: 40,
          itemStyle: {
            color: "orange",
            opacity: 0.1,
          },
          emphasis: {
            itemStyle: {
              color: "#67b6df"
            },
          },
        },
        {
          type: "pictorialBar",
          data: [1, 1, 1, 1],
          symbolRepeat: true,
          symbolPosition: "end",
          symbolSize: [40, 10],
          symbolOffset: [0, 20],
          itemStyle: {
            color: "rgba(255, 0, 0, 0.5)",
          },
        },
        {
          type: "bar",
          stack: "all",
          data: [2, 2, 2, 2],
          itemStyle: {
            opacity: 0,
          },
          barWidth: 40,
        },
        {
          type: "bar",
          data: data.map((item) => item - 2),
          stack: "all",
          itemStyle: {
            color: "#88c1df",
          },
          emphasis: {
            itemStyle: {
              color: "#67b6df"
            },
          },
          barGap: "-100%",
          barWidth: 40,
        },
      ],
    };
    myEchart.setOption(option);
  });
  onUnmounted(() => {
    myEchart.dispose(myRich);
  });
  </script>
  
  <style lang="less" scoped>
  #rich {
    width: 800px;
    height: 400px;
  }
  </style>
  